<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>jQuery Smooth Scroll Plugin</title>
  <style>
  html,
  body {
    margin: 0;
    padding: 0;
    border-width: 0;
  }
  body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    width: 94%;
    margin: 0 auto;
    padding: 0 3%;
    max-width: 1120px;
    font-size: 1em;
    line-height: 1.5;
    background-color: #fff;
    color: #242424;
  }
  pre {
    background-color: #f3f3f3;
    padding: .25em;
    border: 1px solid #ccc;
    font-size: .9em;
    overflow: auto;
  }
  code {
    font-family: Monaco, Courier, monospace;
  }
  .comment,
  .comments {
    color: #aaa;
  }
  .keyword {
    color: blue;
  }
  .string {
    color: #090;
  }
  .number {
    color: #099;
  }

  td.gutter {
    text-align: right;
    padding-right: 3px;
    padding-left: 3px;
    background-color: #ddd;
    color: #aaa;
  }
  td.code {
    padding-left: 5px;
  }
  h1, h2, h3 {
    font-weight: normal;
    color: #141414;
  }
  h2 {
    padding-bottom: .2em;
    border-bottom: 1px solid #ccc;
  }
  .right {
    float: right;
  }
  </style>
</head>
<body>

<div class="right"><a href="demo/index.html">Demo</a></div>
<h1 id="smooth-scroll-plugin">Smooth Scroll Plugin</h1>
<p>Allows for easy implementation of smooth scrolling for same-page links.</p>
<p><a href="https://npmjs.org/package/jquery-smooth-scroll"><img src="https://nodei.co/npm/jquery-smooth-scroll.png?compact=true" alt="NPM"></a></p>
<p>Note: Version 2.0+ of this plugin requires jQuery version 1.7 or greater.</p>
<h2 id="download">Download</h2>
<p>Using npm:</p>
<pre><code class="lang-bash"><div id="highlighter_372788" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">npm </code><code class="functions">install</code> <code class="plain">jquery-smooth-scroll</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>The old-fashioned way:</p>
<p>Go to the following URL in your browser and copy/paste the code into your own file:
<a href="https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js">https://raw.githubusercontent.com/kswedberg/jquery-smooth-scroll/master/jquery.smooth-scroll.js</a></p>
<h2 id="demo">Demo</h2>
<p>You can try a bare-bones demo at <a href="https://kswedberg.github.io/jquery-smooth-scroll/demo/">kswedberg.github.io/jquery-smooth-scroll/demo/</a></p>
<h2 id="features">Features</h2>
<h3 id="-fn-smoothscroll">$.fn.smoothScroll</h3>
<ul>
<li>Works like this: <code>$(&#39;a&#39;).smoothScroll();</code></li>
<li>Specify a containing element if you want: <code>$(&#39;#container a&#39;).smoothScroll();</code></li>
<li>Exclude links if they are within a containing element: <code>$(&#39;#container a&#39;).smoothScroll({excludeWithin: [&#39;.container2&#39;]});</code></li>
<li>Exclude links if they match certain conditions: <code>$(&#39;a&#39;).smoothScroll({exclude: [&#39;.rough&#39;,&#39;#chunky&#39;]});</code></li>
<li>Adjust where the scrolling stops: <code>$(&#39;.backtotop&#39;).smoothScroll({offset: -100});</code></li>
<li>Add a callback function that is triggered before the scroll starts: <code>$(&#39;a&#39;).smoothScroll({beforeScroll: function() { alert(&#39;ready to go!&#39;); }});</code></li>
<li>Add a callback function that is triggered after the scroll is complete: <code>$(&#39;a&#39;).smoothScroll({afterScroll: function() { alert(&#39;we made it!&#39;); }});</code></li>
<li>Add back button support by using a <a href="https://developer.mozilla.org/en-US/docs/Web/API/HashChangeEvent"><code>hashchange</code> event listener</a>. You can also include a history management plugin such as <a href="http://benalman.com/code/projects/jquery-bbq/docs/files/jquery-ba-bbq-js.html">Ben Alman&#39;s BBQ</a> for ancient browser support (IE &lt; 8), but you&#39;ll need jQuery 1.8 or earlier. See <a href="demo/hashchange.html">demo/hashchange.html</a> or <a href="demo/bbq.html">demo/bbq.html</a> for an example of how to implement.</li>
</ul>
<h4 id="options">Options</h4>
<p>The following options, shown with their default values, are available for both <code>$.fn.smoothScroll</code> and <code>$.smoothScroll</code>:</p>
<pre><code class="lang-javascript"><div id="highlighter_241351" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div><div class="line number15 index14 alt2">15</div><div class="line number16 index15 alt1">16</div><div class="line number17 index16 alt2">17</div><div class="line number18 index17 alt1">18</div><div class="line number19 index18 alt2">19</div><div class="line number20 index19 alt1">20</div><div class="line number21 index20 alt2">21</div><div class="line number22 index21 alt1">22</div><div class="line number23 index22 alt2">23</div><div class="line number24 index23 alt1">24</div><div class="line number25 index24 alt2">25</div><div class="line number26 index25 alt1">26</div><div class="line number27 index26 alt2">27</div><div class="line number28 index27 alt1">28</div><div class="line number29 index28 alt2">29</div><div class="line number30 index29 alt1">30</div><div class="line number31 index30 alt2">31</div><div class="line number32 index31 alt1">32</div><div class="line number33 index32 alt2">33</div><div class="line number34 index33 alt1">34</div><div class="line number35 index34 alt2">35</div><div class="line number36 index35 alt1">36</div><div class="line number37 index36 alt2">37</div><div class="line number38 index37 alt1">38</div><div class="line number39 index38 alt2">39</div><div class="line number40 index39 alt1">40</div><div class="line number41 index40 alt2">41</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">{</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">offset: 0,</code></div><div class="line number3 index2 alt2">&nbsp;</div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// one of 'top' or 'left'</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">direction: </code><code class="string">'top'</code><code class="plain">,</code></div><div class="line number6 index5 alt1">&nbsp;</div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// only use if you want to override default behavior or if using $.smoothScroll</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">scrollTarget: </code><code class="keyword">null</code><code class="plain">,</code></div><div class="line number9 index8 alt2">&nbsp;</div><div class="line number10 index9 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// automatically focus the target element after scrolling to it</code></div><div class="line number11 index10 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// (see <a href="https://github.com/kswedberg/jquery-smooth-scroll#focus-element-after-scrolling-to-it">https://github.com/kswedberg/jquery-smooth-scroll#focus-element-after-scrolling-to-it</a> for details)</code></div><div class="line number12 index11 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">autoFocus: </code><code class="keyword">false</code><code class="plain">,</code></div><div class="line number13 index12 alt2">&nbsp;</div><div class="line number14 index13 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// string to use as selector for event delegation</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">delegateSelector: </code><code class="keyword">null</code><code class="plain">,</code></div><div class="line number16 index15 alt1">&nbsp;</div><div class="line number17 index16 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// fn(opts) function to be called before scrolling occurs.</code></div><div class="line number18 index17 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// `this` is the element(s) being scrolled</code></div><div class="line number19 index18 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">beforeScroll: </code><code class="keyword">function</code><code class="plain">() {},</code></div><div class="line number20 index19 alt1">&nbsp;</div><div class="line number21 index20 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// fn(opts) function to be called after scrolling occurs.</code></div><div class="line number22 index21 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// `this` is the triggering element</code></div><div class="line number23 index22 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">afterScroll: </code><code class="keyword">function</code><code class="plain">() {},</code></div><div class="line number24 index23 alt1">&nbsp;</div><div class="line number25 index24 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// easing name. jQuery comes with "swing" and "linear." For others, you'll need an easing plugin</code></div><div class="line number26 index25 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// from jQuery UI or elsewhere</code></div><div class="line number27 index26 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">easing: 'swing</code><code class="string">',</code></div><div class="line number28 index27 alt1">&nbsp;</div><div class="line number29 index28 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="string">// speed can be a number or '</code><code class="plain">auto</code><code class="string">'</code></div><div class="line number30 index29 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="string">// if '</code><code class="plain">auto', the speed will be calculated based on the formula:</code></div><div class="line number31 index30 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// (current scroll position - target scroll position) / autoCoefficient</code></div><div class="line number32 index31 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">speed: 400,</code></div><div class="line number33 index32 alt2">&nbsp;</div><div class="line number34 index33 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// autoCoefficent: Only used when speed set to "auto".</code></div><div class="line number35 index34 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// The higher this number, the faster the scroll speed</code></div><div class="line number36 index35 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">autoCoefficient: 2,</code></div><div class="line number37 index36 alt2">&nbsp;</div><div class="line number38 index37 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// $.fn.smoothScroll only: whether to prevent the default click action</code></div><div class="line number39 index38 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">preventDefault: </code><code class="keyword">true</code></div><div class="line number40 index39 alt1">&nbsp;</div><div class="line number41 index40 alt2"><code class="plain">}</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>The options object for <code>$.fn.smoothScroll</code> can take two additional properties:
<code>exclude</code> and <code>excludeWithin</code>. The value for both of these is an array of
selectors, DOM elements or jQuery objects. Default value for both is an
empty array.</p>
<h4 id="setting-options-after-initial-call">Setting options after initial call</h4>
<p>If you need to change any of the options after you&#39;ve already called <code>.smoothScroll()</code>,
you can do so by passing the <code>&quot;options&quot;</code> string as the first argument and an
options object as the second.</p>
<h3 id="-smoothscroll">$.smoothScroll</h3>
<ul>
<li>Utility method works without a selector: <code>$.smoothScroll()</code></li>
<li>Can be used to scroll any element (not just <code>document.documentElement</code> / <code>document.body</code>)</li>
<li><p>Doesn&#39;t automatically fire, so you need to bind it to some other user
interaction. For example:</p>
<pre><code class="lang-js"><div id="highlighter_313490" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'button.scrollsomething'</code><code class="plain">).on(</code><code class="string">'click'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">$.smoothScroll({</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">scrollElement: $(</code><code class="string">'div.scrollme'</code><code class="plain">),</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">scrollTarget: </code><code class="string">'#findme'</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">});</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="keyword">false</code><code class="plain">;</code></div><div class="line number7 index6 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
</li>
<li><p>The <code>$.smoothScroll</code> method can take one or two arguments.</p>
<ul>
<li>If the first argument is a number or a &quot;relative string,&quot; the document is scrolled to that
position. If it&#39;s an options object, those options determine how the
document (or other element) will be scrolled.</li>
<li>If a number or &quot;relative string&quot; is provided as the second argument, it will override whatever may have been set for the <code>scrollTarget</code> option.</li>
<li>The relative string syntax, introduced in version 2.1, looks like <code>&quot;+=100px&quot;</code> or <code>&quot;-=50px&quot;</code> (see below for an example).</li>
</ul>
</li>
</ul>
<h4 id="additional-option">Additional Option</h4>
<p>The following option, in addition to those listed for <code>$.fn.smoothScroll</code> above, is available
for <code>$.smoothScroll</code>:</p>
<pre><code class="lang-javascript"><div id="highlighter_424332" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">{</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// The jQuery set of elements you wish to scroll.</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">//&nbsp; if null (default), $('html, body').firstScrollable() is used.</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">scrollElement: </code><code class="keyword">null</code></div><div class="line number5 index4 alt2"><code class="plain">}</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h4 id="note-">Note:</h4>
<p>If you use <code>$.smoothScroll</code>, do NOT use the <code>body</code> element (<code>document.body</code> or <code>$(&#39;body&#39;)</code>) alone for the <code>scrollElement</code> option. Probably not a good idea to use <code>document.documentElement</code> (<code>$(&#39;html&#39;)</code>) by itself either.</p>
<h3 id="-fn-scrollable">$.fn.scrollable</h3>
<ul>
<li>Selects the matched element(s) that are scrollable. Acts just like a
DOM traversal method such as <code>.find()</code> or <code>.next()</code>.</li>
<li>Uses <code>document.scrollingElement</code> on compatible browsers when the selector is &#39;html&#39; or &#39;body&#39; or &#39;html, body&#39;.</li>
<li>The resulting jQuery set may consist of <strong>zero, one, or multiple</strong>
elements.</li>
</ul>
<h3 id="-fn-firstscrollable">$.fn.firstScrollable</h3>
<ul>
<li>Selects the first matched element that is scrollable. Acts just like a
DOM traversal method such as <code>.find()</code> or <code>.next()</code>.</li>
<li>The resulting jQuery set may consist of <strong>zero or one</strong> element.</li>
<li>This method is used <em>internally</em> by the plugin to determine which element
to use for &quot;document&quot; scrolling:
<code>$(&#39;html, body&#39;).firstScrollable().animate({scrollTop: someNumber},
someSpeed)</code></li>
<li>Uses <code>document.scrollingElement</code> on compatible browsers when the selector is &#39;html&#39; or &#39;body&#39; or &#39;html, body&#39;.</li>
</ul>
<h2 id="examples">Examples</h2>
<h3 id="scroll-down-one-page-at-a-time-v2-1-">Scroll down one &quot;page&quot; at a time (v2.1+)</h3>
<p>With smoothScroll version 2.1 and later, you can use the &quot;relative string&quot; syntax to scroll an element or the document a certain number of pixels relative to its current position. The following code will scroll the document down one page at a time when the user clicks the &quot;.pagedown&quot; button:</p>
<pre><code class="lang-js"><div id="highlighter_505581" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'button.pagedown'</code><code class="plain">).on(</code><code class="string">'click'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">$.smoothScroll(</code><code class="string">'+='</code> <code class="plain">+ $(window).height());</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="smooth-scrolling-on-page-load">Smooth scrolling on page load</h3>
<p>If you want to scroll to an element when the page loads, use <code>$.smoothScroll()</code> in a script at the end of the body or use <code>$(document).ready()</code>. To prevent the browser from automatically scrolling to the element on its own, your link on page 1 will need to include a fragment identifier that does <em>not</em> match an element id on page 2. To ensure that users without JavaScript get to the same element, you should modify the link&#39;s hash on page 1 with JavaScript. Your script on page 2 will then modify it back to the correct one when you call <code>$.smoothScroll()</code>.</p>
<p>For example, let&#39;s say you want to smooth scroll to <code>&lt;div id=&quot;scrolltome&quot;&gt;&lt;/div&gt;</code> on page-2.html. For page-1.html, your script might do the following:</p>
<pre><code class="lang-js"><div id="highlighter_147373" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'a[href="page-2.html#scrolltome"]'</code><code class="plain">).attr(</code><code class="string">'href'</code><code class="plain">, </code><code class="keyword">function</code><code class="plain">() {</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">hrefParts = </code><code class="keyword">this</code><code class="plain">.href.split(/</code><code class="preprocessor">#/);</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">hrefParts[1] = </code><code class="string">'smoothScroll'</code> <code class="plain">+ hrefParts[1];</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="keyword">return</code> <code class="plain">hrefParts.join(</code><code class="string">'#'</code><code class="plain">);</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>Then for page-2.html, your script would do this:</p>
<pre><code class="lang-js"><div id="highlighter_913191" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="comments">// Call $.smoothScroll if location.hash starts with "#smoothScroll"</code></div><div class="line number2 index1 alt1"><code class="keyword">var</code> <code class="plain">reSmooth = /^</code><code class="preprocessor">#smoothScroll/;</code></div><div class="line number3 index2 alt2"><code class="keyword">var</code> <code class="plain">id;</code></div><div class="line number4 index3 alt1"><code class="keyword">if</code> <code class="plain">(reSmooth.test(location.hash)) {</code></div><div class="line number5 index4 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="comments">// Strip the "#smoothScroll" part off (and put "#" back on the beginning)</code></div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">id = </code><code class="string">'#'</code> <code class="plain">+ location.hash.replace(reSmooth, </code><code class="string">''</code><code class="plain">);</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">$.smoothScroll({scrollTarget: id});</code></div><div class="line number8 index7 alt1"><code class="plain">}</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h3 id="focus-element-after-scrolling-to-it-">Focus element after scrolling to it.</h3>
<p>Imagine you have a link to a form somewhere on the same page. When the user clicks the link, you want the user to be able to begin interacting with that form.</p>
<ul>
<li><p>As of <strong>smoothScroll version 2.2</strong>, the plugin will automatically focus the element if you set the <code>autoFocus</code> option to <code>true</code>.</p>
<pre><code class="lang-js"><div id="highlighter_91561" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.example'</code><code class="plain">).smoothScroll({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">autoFocus: </code><code class="keyword">true</code></div><div class="line number3 index2 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
</li>
<li><p>In the future, versions 3.x and later will have <code>autoFocus</code> set to true <strong>by default</strong>.</p>
</li>
<li>If you are using the low-level <code>$.smoothScroll</code> method, <code>autoFocus</code> will only work if you&#39;ve also provided a value for the <code>scrollTarget</code> option.</li>
<li>Prior to version 2.2, you can use the <code>afterScroll</code> callback function. Here is an example that focuses the first input within the form after scrolling to the form:</li>
</ul>
<pre><code class="lang-js"><div id="highlighter_865287" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'a.example'</code><code class="plain">).smoothScroll({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">afterScroll: </code><code class="keyword">function</code><code class="plain">(options) {</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$(options.scrollTarget).find(</code><code class="string">'input'</code><code class="plain">)[0].focus();</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number5 index4 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<p>For accessibility reasons, it might make sense to focus any element you scroll to, even if it&#39;s not a natively focusable element. To do so, you could add a <code>tabIndex</code> attribute to the target element (this, again, is for versions prior to 2.2):</p>
<pre><code class="lang-js"><div id="highlighter_493676" class="syntaxhighlighter  "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="plain">$(</code><code class="string">'div.example'</code><code class="plain">).smoothScroll({</code></div><div class="line number2 index1 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">afterScroll: </code><code class="keyword">function</code><code class="plain">(options) {</code></div><div class="line number3 index2 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">var</code> <code class="plain">$tgt = $(options.scrollTarget);</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$tgt[0].focus();</code></div><div class="line number5 index4 alt2">&nbsp;</div><div class="line number6 index5 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="keyword">if</code> <code class="plain">(!$tgt.is(document.activeElement)) {</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$tgt.attr(</code><code class="string">'tabIndex'</code><code class="plain">, </code><code class="string">'-1'</code><code class="plain">);</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">$tgt[0].focus();</code></div><div class="line number9 index8 alt2"><code class="undefined spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number10 index9 alt1"><code class="undefined spaces">&nbsp;&nbsp;</code><code class="plain">}</code></div><div class="line number11 index10 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div>
</code></pre>
<h2 id="notes">Notes</h2>
<ul>
<li>To determine where to scroll the page, the <code>$.fn.smoothScroll</code> method looks
for an element with an <em>id</em> attribute that matches the <code>&lt;a&gt;</code> element&#39;s hash.
It does <em>not</em> look at the element&#39;s <em>name</em> attribute. If you want a clicked link
to scroll to a &quot;named anchor&quot; (e.g. <code>&lt;a name=&quot;foo&quot;&gt;</code>), you&#39;ll need to use the
<code>$.smoothScroll</code> method instead.</li>
<li>The plugin&#39;s <code>$.fn.smoothScroll</code> and <code>$.smoothScroll</code> methods use the
<code>$.fn.firstScrollable</code> DOM traversal method (also defined by this plugin)
to determine which element is scrollable. If no elements are scrollable,
these methods return a jQuery object containing an empty array, just like
all of jQuery&#39;s other DOM traversal methods. Any further chained methods,
therefore, will be called against no elements (which, in most cases,
means that nothing will happen).</li>
</ul>
<h2 id="contributing">Contributing</h2>
<p>Thank you! Please consider the following when working on this repo before you submit a pull request:</p>
<ul>
<li>For code changes, please work on the &quot;source&quot; file: <code>src/jquery.smooth-scroll.js</code>.</li>
<li>Style conventions are noted in the <code>jshint</code> grunt file options and the <code>.jscsrc</code> file. To be sure your additions comply, run <code>grunt lint</code> from the command line.</li>
<li>If possible, please use Tim Pope&#39;s <a href="http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html">git commit message style</a>. Multiple commits in a pull request will be squashed into a single commit. I may adjust the message for clarity, style, or grammar. I manually commit all merged PRs using the <code>--author</code> flag to ensure that proper authorship (yours) is maintained.</li>
</ul>

</body>
</html>
